import React, { Component,Fragment } from 'react';
import PropTypes from 'prop-types'
import { connect } from 'dva';
import { Button, Row, Form, Icon, Input ,Checkbox, message} from 'antd'
import router from 'umi/router';
import styles from './index.less';
//注入模型类 dispatch
const mapStateToProps = (state) => {
  const refaultData = state['AdminUser'].refaultData;
  //console.log('aa',state);
  return {
    refaultData,
  };
};
@connect(mapStateToProps)
@Form.create()
class LoginPage extends Component {
    state = {
        autoLogin:false,//自动登录框是否勾选
        loginSubmitLogin:false,//登录按钮状态
      };
      changeAutoLogin = e => {
        this.setState({
          autoLogin: e.target.checked,//自动登录框是否勾选
        });
      };
      loginSubmit = (e)=>{
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
          if (!err) {
            console.log('Received values of form: ', values);
            this.props.dispatch({
                type: 'AdminUser/find',
                payload:values,
                callback:(e)=>{
                    if(e.code === 1){
                        const cookietimeout = Number.parseInt(new Date().getTime() / 1000) + (86400*7);
                        localStorage.setItem("token",e.data.token);
                        message.success(e.msg);
                        //跳转
                        router.push('/');
                    }else{
                      message.error(e.msg);
                    }
                }
            });
          }
        });
      };
      render() {
        const { loading } = this.props;
        let footerLinks = [
            {
              key: 'github',
              title: <Icon type="github" />,
              href: 'https://github.com/zuiidea/antd-admin',
              blankTarget: true,
            },
          ]
        return (
            <Fragment>
            <div className={styles.form}>
              <Form onSubmit={this.loginSubmit} hideRequiredMark>
                <Form.Item hasFeedback>
                  {this.props.form.getFieldDecorator('user_name', {
                    rules: [
                      {
                        required: true,
                      },
                    ],
                  })(
                    <Input
                      size="large"
                      onPressEnter={this.handleOk}
                      prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                      placeholder="请输入账号"
                    />
                  )}
                </Form.Item>
                <Form.Item hasFeedback>
                  {this.props.form.getFieldDecorator('user_pwd', {
                    rules: [
                      {
                        required: true,
                      },
                    ],
                  })(
                    <Input
                      size="large"
                      type="password"
                      prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                      onPressEnter={this.handleOk}
                      placeholder="请输入密码"
                    />
                  )}
                </Form.Item>
                <Row>
                  <div>
                    <Checkbox checked={this.state.autoLogin} onChange={this.changeAutoLogin}>
                      记住我
                    </Checkbox>
                    <a style={{ float: 'right' }} href="">
                      忘记密码
                    </a>
                  </div>
                  <Button
                    size="large"
                    htmlType="submit"
                    type="primary"
                    onClick={this.handleOk}
                    loading={this.props.loginSubmitLogin}
                  >
                    <span>登录</span>
                  </Button>
                  <div className={styles.other}>
                    其他登录方式
                    <Icon type="alipay-circle" className={styles.icon} theme="outlined" />
                    <Icon type="taobao-circle" className={styles.icon} theme="outlined" />
                    <Icon type="weibo-circle" className={styles.icon} theme="outlined" />
                    
                  </div>
                </Row>
              </Form>
            </div>
          </Fragment>
        );
      }
}
LoginPage.propTypes = {
    form: PropTypes.object,
    dispatch: PropTypes.func,
    loading: PropTypes.object,
  }
export default LoginPage;